<template>
    <div>
       {{count}}
       <button @click="increment">+</button>
       <button @click="decrement">-</button>
       <div class="userpic">
              <div v-for="(user,index) in usertask" class="userauto" :class="{'active':index===currentIndex}" @mouseover="bigchange(index)" @mouseenter="bigstop" @mouseleave="biggo">
                  <img :src="user.imageurl" class="imgwid">
                  <div class="userline">
                     <span class="usercicle" :class="{'act':index===currentIndex}" >{{currentIndex}}</span>
                  </div>
                  <div class="usercont">
                      <p class="username">{{user.title}}</p>
                      <p class="usertent">{{user.content}}</p>
                  </div>
              </div>
        </div>
    </div>
</template>
<script>
import {mapGetters,mapActions} from 'vuex'
export default {
  data(){
    return{
      msg: '大屏',
      timer:''
    }
  },
  created:function(){
     this.$nextTick(() =>{
         this.timer=setInterval(() => {
              this.autoPlay();
         },4000)
    })

  },
  computed:mapGetters([
     'count','currentIndex','usertask'
  ]),
  methods:{
      ...mapActions([
         'increment','decrement','autoPlay'
      ]),
     bigchange(index){
         this.$store.state.currentIndex = index
     },
     biggo() {
         this.timer = setInterval(() => {
            this.autoPlay()
         },4000)
     },
     bigstop(){
         clearInterval(this.timer)
         this.timer = null
     }
  }
}
</script>
<style>
.act{background:#00CCFF;}
.active{color:#8BABD1;}
</style>